<template>
  <div class="left-one">
    <!-- 标题 -->
    <div class="title-box">
      男女分布情况
      <div class="title-line"></div>
      <div class="title-line2"></div>
    </div>
    <!-- 内容 -->
    <div class="content-box">
      <div id="barEcharts" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  methods: {
    initBarEcharts() {
      let radarEcharts = echarts.init(document.getElementById("barEcharts"));
      let options = {
        // title: { text: "男女分布柱状图" },
        grid: {
          left: "2%",
          top: "10%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        legend: {
          data: ["男", "女"],
          right: 5,
          top: 0,
          //   orient: "vertical",
          textStyle: {
            fontSize: 12,
            fontFamily: "Source Han Sans CN",
            fontWeight: "bold",
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: ["小区", "厂区", "学校", "产业园", "机关"],
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,1)",
                width: 1,
                type: "solid",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              //formatter: '{value} %'
              show: true,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
          },
        ],
        series: [
          {
            name: "男",
            type: "bar",
            // areaStyle: {normal: {}},
            barWidth: "35%", //柱子宽度
            data: [14200, 6000, 2200, 1200, 200],
            itemStyle: {
              normal: {
                color: "#2f89cf", //柱子颜色
                opacity: 1,
                barBorderRadius: 5,
              },
            },
          },
          {
            name: "女",
            type: "bar",
            // areaStyle: {normal: {}},
            barWidth: "35%", //柱子宽度
            data: [12300, 2000, 2000, 600, 250],
            itemStyle: {
              normal: {
                color: "rgb(245,174,185)", //柱子颜色
                opacity: 1,
                barBorderRadius: 5,
              },
            },
          },
        ],
      };
      radarEcharts.setOption(options);
    },
  },
  mounted() {
    this.initBarEcharts();
  },
};
</script>
  
  <style scoped>
.title-box {
  position: relative;
  padding: 0.8vw;
  display: flex;
  align-items: center;
  height: 20px;
  color: #fff;
  user-select: none;
  background-color: rgba(58, 64, 79, 0.8);
}

.content-box {
  padding: 0.5vw;
  height: 37vh;
  color: #fff;
}
</style>